
// 表格头部 颜色定义
.el-table th {
  background-color: $a2-Color;
  color: $primaryText;
  font-weight: 600;
}

.el-table--border {
  border: 2px solid $mainColor;
  border-radius: $radius-1;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: $a2-Color;
}

.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left {
  border-right: 1px solid #dcdcdc;
}

// .el-table__fixed-right {
//   height: 100%;
// }
// .el-table__fixed-right::before, .el-table__fixed::before {
//   height: 0;
// }


.el-table--scrollable-y .el-table__body-wrapper {
  // overflow: auto;
  height: calc(100% - 48px);
}
.el-table__fixed-right-patch {
  background: $a2-Color;
}

.el-table__body-wrapper {
  height: 100% !important;
}
.el-table {
  // overflow: visible;
  width: 100%;
  height: 100%;
  
}

// tr {
//   .is-hidden {
//     display: table-cell;
//     overflow: hidden;
//   }
// }
.el-table .cell {
  overflow: visible;
  height: 100%;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
}

tr > .el-table__expanded-cell[class*=cell] {
  padding: 0 !important;
}

// table th, table td {
//   padding: 0;
// }



.el-popover.el-popper {
  width: auto !important;
}

// 侧边栏
.el-menu {
  width: 100%;
  height: 100%;
}
.el-menu--collapse .el-sub-menu {
  text-align: center;
}

// 分页

.el-pager li.active {
  color: $mainColor
}


// 下拉
// .el-select {
//   width: 100%;
  
// }
.el-select .el-input .el-select__caret {
  color: $mainColor;
  font-size: $fontSize-3;
}
.el-input__suffix {
  display: flex;
  align-items: center;
}


.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: $mainColor;
}
.el-pagination__sizes .el-input .el-input__inner:hover {
  border-color: $mainColor;
}
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: $a2-Color;
  color: $mainColor;
}
.el-select-dropdown__item.selected {
  color: $mainColor;
}
.el-select .el-input__inner:focus {
  border-color: $mainColor;
}

.el-input__inner:focus + .el-input__suffix > .el-input__suffix-inner > i{
  color: $mainColor;
}

input::-webkit-input-placeholder{   // 谷歌
  font-size: $fontSize;
}

// 时间选择
.el-date-table td.available:hover {
  color: $a11-Color;
}
.el-date-table td.current:not(.disabled) span {
  background: $mainColor;
}
.el-date-table td.today span {
  color: $mainColor;
}

// 单选
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background: $mainColor;
  border-color: $mainColor;
  box-shadow: -1px 0 0 0 $mainColor;
}
.el-radio-button__inner:hover {
  color: $mainColor;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner {
  background-color: $mainColor;
}
.el-radio-button--mini .el-radio-button__inner {
  color: $regularText;
}

// 多选组边框
.el-checkbox {
  font-size: $fontSize-1
}
.el-checkbox__label {
  font-size: $fontSize-1
}
.el-checkbox.is-bordered {
  background: $a3-Color;
}
.el-checkbox__inner:hover {
  border-color: $mainColor;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: $mainColor;
}
.el-checkbox.is-bordered.is-checked {
  border-color: $mainColor;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  color: $mainColor;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $mainColor;
  background: $mainColor;
}


// 对话框
.el-dialog {
  background: $a3-Color;
  border-radius: 8px;
  .el-dialog__header {
    padding: 10px 15px 10px 15px;
    .el-dialog__title {
      color: $primaryText;
      font-size: $fontSize-17;
      font-weight: 600;
    }
    .el-dialog__headerbtn {
      top: 12px;
      background-color: #e6e6e6;
      border-radius: $radius-1;
      .el-dialog__close {
        color: $primaryText;
        font-weight: 600;
        // border: ;
      }
    }
  }
  .el-dialog__body {
    background: white;
    padding: 10px;
  }
  .el-dialog__footer {
    background: $a2-Color;
    box-shadow: 0 0 1px $mainColor;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px 20px 10px 20px;
  }
}

// 抽屉
.el-drawer__header {
  height: 60px;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 0;
}
.el-drawer__body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.el-drawer__header>:first-child {
  font-size: $fontSize-3;
  font-weight: 600;
  color: #000;
}
.el-drawer__close-btn {
  color: #000;
}
.el-drawer__close-btn:hover i {
  color: $mainColor;
}

.el-scrollbar {
  height: calc(100% - 33px);
}
// .el-scrollbar__bar.is-horizontal { // 隐藏y滚动条
//   height: 0;
//   left: 0;
// }
.el-scrollbar__bar.is-vertical {
  height: 0;
  left: 0;
}

.el-menu-item * {
  vertical-align: top;
}
.el-sub-menu__title * {
  vertical-align: top;
}
// menu
.el-sub-menu .el-menu {
  background-color: $a9-Color;
  // margin-left: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-sizing: border-box;
}
.el-menu-item:focus, .el-menu-item:hover {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: $mainColor;
  background-color: $a9-Color;

}
.el-sub-menu__title:focus, .el-sub-menu__title:hover {
  color: $mainColor;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: $a9-Color;
  // @extend .standard-7
}
.el-sub-menu .el-menu-item {
  height: 30px;
  line-height: 30px;
}
.el-menu-item.is-active{
  color: $mainColor;
  .dots {
    .Dot {
      background: $mainColor;
    }
  }
}
// .el-menu-item.is-opened {
//   color: $mainColor;
// }
.dots {
  display: flex;
  align-items: center;
}

.Dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  margin-right: 10px;
}
// .is-active {
//   color: red;
// }
// .Dot:hover, .Dot:focus, .Dot:active {
//   background: $mainColor;
// }
.dots:focus, .dots:hover {
  .Dot {
    background: $mainColor;
  }
}
// .dots.is-active {
//   .Dot {
//     background: $mainColor;
//   }
// }



.btn-1 {
  min-width: 60px;
  height: 30px;
  min-height: 30px;
  line-height: 0;
  border-radius: $radius-1;
  background: $mainColor; 
  font-size: $fontSize-1;
  color: $a3-Color;
  padding: 12px 15px;
  box-sizing: border-box;
  border: 0;
  letter-spacing: 1px
}
.btn-1:hover {
  background: $a10-Color;
  color: $a3-Color;
}
.btn-1:focus {
  background: $a11-Color;
  color: $a3-Color;
}

.btn-1.is-disabled, .btn-1.is-disabled:active, .btn-1.is-disabled:focus, .btn-1.is-disabled:hover {
  background: rgba(17, 183, 206, .5);
  color: $a3-Color;
}


.btn-2 {
  min-width: 60px;
  height: 30px;
  min-height: 30px;
  line-height: 0;
  border-radius: $radius-1;
  background: $a3-Color; 
  font-size: $fontSize-1;
  color: $mainColor;
  padding: 12px 15px;
  box-sizing: border-box;
  border: 1px solid $mainColor;
  letter-spacing: 1px
}

.btn-2:hover, .btn-2:focus {
  background: white;
  color: $mainColor;
}
// .btn-2:focus {
//   background: $a11-Color;
//   color: $a3-Color;
// }

.btn-2.is-disabled, .btn-2.is-disabled:active, .btn-2.is-disabled:focus, .btn-2.is-disabled:hover {
  // background: rgba(17, 183, 206, .5);
  color: rgba(17, 183, 206, .5);
  border: 1px solid rgba(17, 183, 206, .5);
}

.btn-3 {
  min-width: 100px;
  height: 40px;
  min-height: 40px;
  line-height: 0;
  border-radius: $radius-3;
  background: $mainColor; 
  font-size: $fontSize-1;
  color: $a3-Color;
  padding: 12px 10px;
  box-sizing: border-box;
  border: 0;
  letter-spacing: 1px
}

.btn-3:hover {
  background: $a10-Color;
  color: $a3-Color;
}
.btn-3:focus {
  background: $a11-Color;
  color: $a3-Color;
}

.btn-3.is-disabled, .btn-3.is-disabled:active, .btn-3.is-disabled:focus, .btn-3.is-disabled:hover {
  background: rgba(17, 183, 206, .5);
  color: $a3-Color;
}

.btn-4 {
  min-width: 100px;
  height: 40px;
  min-height: 40px;
  line-height: 0;
  border-radius: $radius-3;
  background: $a3-Color; 
  font-size: $fontSize-1;
  color: $mainColor;
  padding: 12px 10px;
  box-sizing: border-box;
  border: 1px solid $mainColor;
  letter-spacing: 1px
}

.icon-jinru_huabanfuben:before {
  color: inherit;
  font-size: 18px;
  padding-right: 10px;
}

.btn-4:hover {
  background: $mainColor;
  color: $a3-Color;
}
.btn-4:focus {
  background: $a11-Color;
  color: $a3-Color;
}

.btn-4.is-disabled, .btn-4.is-disabled:active, .btn-4.is-disabled:focus, .btn-4.is-disabled:hover {
  background: rgba(17, 183, 206, .5);
  color: $a3-Color;
}

.btn-5 {
  min-width: 100px;
  height: 30px;
  min-height: 30px;
  line-height: 0;
  border-radius: $radius-1;
  background: $a3-Color; 
  font-size: $fontSize-1;
  color: $mainColor;
  padding: 12px 10px;
  box-sizing: border-box;
  border: 1px solid $mainColor;
  letter-spacing: 1px
}
.btn-5-border {
  // border: 1px solid $mainColor;
}

.btn-5:hover {
  background: $mainColor;
  color: $a3-Color;
}

.btn-5:focus {
  background: $a11-Color;
  color: $a3-Color;
}

.btn-5.is-disabled, .btn-5.is-disabled:active, .btn-5.is-disabled:focus, .btn-5.is-disabled:hover {
  background: rgba(255, 255, 255, .8);
  color: rgba(17, 183, 206, .8);
}


.btn-6 {
  min-width: 100px;
  height: 30px;
  min-height: 30px;
  line-height: 0;
  border-radius: $radius-1;
  background: $a3-Color; 
  font-size: $fontSize-1;
  color: black;
  padding: 12px 10px;
  box-sizing: border-box;
  border: 1px solid $a8-Color;
  letter-spacing: 1px
}

.icon-zhangdanchaxun:before {
  color: #1296db;
  font-size: 18px;
  padding-right: 5px;
}

.icon-shoufeijilu:before {
  color: orange;
  font-size: 18px;
  padding-right: 5px;
}

.btn-6:hover {
  color: $mainColor;
  background: $a3-Color;
}

.btn-6:focus {
  background: $a2-Color;
  color: $mainColor;
}

.btn-6.is-disabled, .btn-6.is-disabled:active, .btn-6.is-disabled:focus, .btn-6.is-disabled:hover {
  background: rgba(246, 254, 255, .5);
  color: rgba(0, 0, 0, .3);
}


// mini btn
.btn-7 {
  min-height: 0;
  padding: 5px;
}
.btn-7:hover, .btn-8:hover {
  border-color: $mainColor;
  color: $mainColor;
  background: white;
}

.btn-8 {
  min-height: 0;
  padding: 5px 10px 5px 10px;
}

.btn-9 {
  min-width: 480px;
  height: 40px;
  min-height: 40px;
  line-height: 0;
  border-radius: $radius-1;
  background: $a3-Color; 
  font-size: $fontSize-1;
  color: $mainColor;
  padding: 12px 15px;
  box-sizing: border-box;
  border: 1px solid $mainColor;
  letter-spacing: 1px
}

.btn-9:hover {
  background: $mainColor;
  color: $a3-Color;
}
.btn-9:focus {
  background: $a11-Color;
  color: $a3-Color;
}

.btn-9.is-disabled, .btn-9.is-disabled:active, .btn-9.is-disabled:focus, .btn-9.is-disabled:hover {
  // background: rgba(17, 183, 206, .5);
  color: rgba(17, 183, 206, .5);
  border: 1px solid rgba(17, 183, 206, .5);
}

.title-input-radius > input {
  border-radius: $radius-3;
}

// 日期
.date-1 > input{
  min-width: 180px;
  height: 30px;
}

.date-2{
  max-width: 25px;
  height: 25px;
  padding: 0;
  & > .el-input__inner {
    max-width: 25px;
    height: 25px;
    padding: 12px;
  }
  & > .el-input__prefix {
    left: 0;
    
  }
}
.date-2:hover {
  border-color: $mainColor;
}

.date-3 {
  max-width: 120px;
  // height: 30px;
}
.date-3{
  & > input {
    max-width: 120px;
    height: 30px;
  }
  & > .el-input__inner {
    padding-right: 0;
  }
}

.date-4 > input{
  max-width: 130px;
  height: 30px;
  .el-input--suffix .el-input__inner {
    padding-right: 0;
  }
}

.date-5 > input {
  height: 30px;
}

.date-6 > input{
  max-width: 160px;
  height: 30px;
}

.input-1 {
  line-height: 30px;
  & > input {
    min-width: 180px;
    height: 30px;
  }
  
}
.input-2 > input {
  // max-width: 180px;
  height: 30px;
}

.input-3 {
  & > input {
    width: 30px;
    height: 30px;
  }
  
}

.input-4 {
  width: 40px;
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  border: 0;
  outline: none;
  border: 1px solid #e6e6e6;
  padding-left: 5px;
}


.input-5 {
  max-width: 120px;
  height: 30px;
  & > .el-input-group__prepend {
    padding: 0 8px;
    background: white;
    color: $mainColor;
  }
  & > input {
    width: 120px;
    height: 30px;
  }
  & > .el-input__inner {
    padding: 10px;
    margin: 0;
  }
}

.input-6 > input{
  max-width: 220px;
  height: 30px;

  
}
.input-6 .el-input__prefix {
  padding-top: 8px;
}

.input-7 > input{
  max-width: 130px;
  height: 30px;
}

.input-8 {
  & > input {
    width: 60px;
    height: 30px;
    padding: 0;
    padding-left: 5px;
  }
  
}

.input-9 > input{
  height: 30px;
}

.el-textarea__inner:focus {
  border-color: $mainColor;
}



.el-input-group__append {
  background: $mainColor;
  color: white;
}

.el-input-group__prepend {
  background: white;
  padding: 0 15px;
}

.select-1 .el-input__inner {
  min-width: 180px;
  height: 30px;
}
.select-2 .el-input__inner {
  max-width: 240px;
  height: 30px;
}

.select-3 .el-input__inner {
  max-width: 130px;
  height: 30px;
}
.select-2 .el-input.el-input--suffix::before,
.select-3 .el-input.el-input--suffix::before{
  position: absolute;
  content: "";
  /* background: red; */
  top: 0;
  /* left: 20px; */
  display: block;
  width: 1px;
  height: 100%;
  right: 30px;
  transform: scaleX(0.5);
  background: #ccc;
}

.select-4 .el-input__inner {
  max-width: 80px;
  height: 30px;
}

.cascader-1 .el-input__inner {
    max-width: 130px;
    height: 30px;
    .el-input--suffix {
      height: 30px;
    }
}
.cascader-1 .el-input--suffix::before {
  position: absolute;
  content: "";
  top: 6px;
  display: block;
  width: 1px;
  height: 30px;
  // height: 100%;
  right: 30px;
  transform: scaleX(0.5);
  background: #ccc;
}
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}
.el-cascader .el-input .el-icon-ArrowDown {
  font-size: 20px;
  color: $mainColor;
}


.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

.radio-group-1 {
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  // background: red;
}

// .radio-group-1 > label {
//   width: 40px;
//   height: 40px;
//   background-color: red;
//   box-sizing: border-box;
// }

// .radio-group-1 > label > span{
//   width: 100%;
//   height: 100%;
// }

// 按钮
// .el-button:active {
//   color: $mainColor;
//   border-color: $mainColor;
//   background: white;
// }
// .el-button:focus, .el-button:hover {
//   color: $mainColor;
//   border-color: $mainColor;
//   background: white;
// }
.radio-group-2 {
  height: 30px;
  line-height: 30px;
  display: flex;
  .el-radio-button {
    box-sizing: border-box;
    & > span {
      padding: 8px 20px;
    }
  }
  
}

.el-autocomplete {
  width: 100%;
}

.el-empty__image {
  width: 80px;
}

// 图片错误插槽展示
.image-slot {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;

  & > i {
    font-size: 36px;
  }
}


.manage {
  width: 100%;
  height: 100%;
  background: $a3-Color;
}
.main {
  // height: 100%;
  margin-top: 20px;
  border: 2px solid $mainColor;
  box-sizing: content-box;
  border-radius: 4px;
  height: 82%;
  overflow: hidden;
  // height: calc(100% - 100px);
  
  // overflow-y: auto;
  & > .router-view-page {
    position: relative;
    height: calc(100% - 40px);
  }
  // & > .el-tabs {
  //   // height: 100%;

  //   & > .el-tabs__content {
  //     overflow-y: scroll;
  //     height: calc(100% - 40px);
  //     & > .el-tab-pane {
  //       height: 100%;
  //     }
  //   }
  // }
}

// 我的工作 小卡片
.total-grad {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  .grad-1 {
    width: 180px;
    height: 100%;
    background: white;
    border-radius: $radius-2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 2px 2px 2px #e9e9e9, -1px 1px 1px #e9e9e9;
    margin-right: 20px;
    .grad-title {
      padding: 0 0 0 20px;
      @extend .standard-11;
    }
    .grad-num {
      padding-left: 20px;
      padding-top: 10px;
      @extend .standard-12
    }
  }

}



.el-card__body {
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
}

.num-btn-small {
	width: 80px;
}
.el-input-number__decrease {
	width: 20px;
}
.el-input-number__increase {
	width: 20px;
}
.el-input-number .el-input__inner {
	padding-left: 0;
	padding-right: 0;
}

.mini-btn {
	width: 60px;
	height: 30px;
	line-height: 30px;
	input {
		height: inherit;
		line-height: inherit;
	}
}


.notData {
  width: 100%;
  // height: 150px;
  text-align: center;
  background: white;
  padding: 30px 0 0 0;
  // border: 1px solid #ccc;
  border-top: none;
  box-sizing: border-box;
  color: #ccc;
}



// tabs
.el-tabs__item {
  font-size: 12px;
  border-right: 1px solid $mainColor;
}
.el-tabs__nav-wrap::after {
  background: $mainColor;
  height: 2px;
}
.el-tabs__active-bar {
  background: transparent;
}
.el-tabs__item:hover {
  color: white;
  background: $mainColor;
}
.el-tabs__item.is-active {
  color: white;
  background: $mainColor;
}
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), 
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
.el-tabs--bottom .el-tabs__item.is-top:last-child, 
.el-tabs--top .el-tabs__item.is-bottom:last-child, 
.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 20px;
}

.el-tabs__header {
  margin: 0;
}

.el-checkbox, .el-radio {
  margin-right: 20px;
}


// 选中样式
.active {
  background-color: $mainColor;
  color: white;
}
.active-1 {
  color: #000;
  font-size: $fontSize-15;
  font-weight: 600;
}

// tree
.el-tree {
  padding-left: 10px;
  
}

// .el-icon-caret-right:before {
//   // content: '\e78f';
//   // font-size: 16px;
  
// }
.el-icon-caret-right:hover {
  color: $mainColor;
}
.el-tree-node__expand-icon.is-leaf:hover {
  color: transparent;
}
.el-tree-node__content:hover {
  background: white;
}
.el-tree-node:focus>.el-tree-node__content {
  background: white;
  .el-tree-node__label {
    background: white;
    box-shadow: 2px 2px 5px rgba(17, 185, 208, .3), -2px -2px 5px rgba(17, 185, 208, .3);
    padding: 3px 5px 3px 5px;
    font-size: $fontSize-2;
    color: $a11-Color;
  }

  // .el-icon-caret-right {
  //   color: $mainColor;
  // }
}
.el-tree-node__label {
  background: white;
  font-size: $fontSize-2;
  color: $a11-Color;
}
// .el-tree-node__expand-icon.expanded {
//   transform: rotate(0deg);
// }

// .el-tree-node__expand-icon .el-icon-caret-right {
//   border: 1px solid red;
// }

.el-upload {
  width: 100%;
}


.screen {
  @extend .standard-7;
  cursor: pointer;
  padding-right: 10px;
}


.f-w {
  display: flex;
  flex-wrap: wrap;
  display: block;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}


::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 3px;  /*宽度竖滚动条的尺寸*/
  height: 10px; /*高度横滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
  /*滚动条里面的条*/
  border-radius: 10px;
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0,0,0, .1);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background   : #ffffff;
}

.leftToRight-layout {
  padding: 0 5px;
  display: flex;
  align-items: center;
  width: 42%;
  margin-bottom: 8px;
  box-sizing: border-box;

  .label {
    height: 40px;
    line-height: 40px;
    text-align: left;
    width: 80px;
    // width: auto;

    & > span {
      padding-right: 10px;
    }
  }

  .operations {
    flex: 1;

    & > .el-select {
      width: 100%;
    }
  }
}

.operation {
	color: $mainColor;
}

.circular-icon {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  font-size: 12px;
  position: relative;
  margin: 0 5px 0 0;
}

.bg-blue {
  background-color: #409eff;
}

.bg-orange {
  background: orange;
}
.bg-red {
  background: #F56C6C;
}
.bg-green {
  background: #67C23A;
}
.bg-black {
  background: #000000;
}